<template>
	<div class="photos">
		<div class="wrapper">
			<div v-for="i in 5" class="column">
				<div class="pack"></div>
			</div>
		</div>
		<div class="load">
			<p>加载更多图片中。。。</p>
			<img src="~assets/image/loading/7.gif" />
		</div>
	</div>
</template>

<script>
	export default {
		name: "Photos",
		data() {
			return {
				imgSrc: [],
				columnDom: [],
				loadFlag: true
			}
		}
		,
		methods: {
			//防抖函数
			debounce(fn,delay){
				let timer = null //借助闭包
				return function(e) {
					if(timer){
						clearTimeout(timer)
					}
					timer = setTimeout(() => {fn(e)},delay) // 简化写法
				}
			},
			//监听滑块滑到最底部事件
			loadScroll(e) {
				const ScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				const ClientHeight = document.documentElement.clientHeight;
				const ScrollHeight = document.documentElement.scrollHeight;
				if (ScrollTop + ClientHeight == ScrollHeight){
					if (this.loadFlag){
						this.loadFlag = false
						console.log('加载更多图片')
						this.getImg()
						this.pushImg(this.imgSrc)
					}
				}
			},
			//将一组图片放入瀑布流布局中
			pushImg(imgArr){
				const len = imgArr.length
				let cumulative = 0
				this.beforeLoading()
				imgArr.forEach((src,index) => {
					let imgDom = document.createElement('img')
					imgDom.src = src
					imgDom.style.borderRadius = '.1rem'
					imgDom.style.width = '100%'
					imgDom.onload = () => {
						this.getMinColumn().append(imgDom)
						cumulative++
						if (cumulative == len){
							console.log('图片加载完成')
							this.afterLoading()
						}
					}
					imgDom.onerror = () => {
						imgDom = null
						console.log('图片：' + src + '加载错误')
						cumulative++
						if (cumulative == len){
							console.log('图片加载完成')
							this.afterLoading()
						}
					}
				})
			},
			//寻找高度最小的column
			getMinColumn(){
				let dom = this.columnDom[0]
				for (let i = 1;i < this.columnDom.length;i++){
					if (this.columnDom[i].scrollHeight < dom.scrollHeight)
						dom = this.columnDom[i]
				}
				return dom
			},
			//图片加载前要执行的操作
			beforeLoading() {
				document.querySelector('.load').style.display = 'block'
				document.querySelector('.photos').style.paddingBottom = '.5rem'
			},
			//图片加载完成后要执行的操作
			afterLoading() {
				document.querySelector('.load').style.display = 'none'
				document.querySelector('.photos').style.paddingBottom = '0'
				this.loadFlag = true
			},
			// 请求更多图片数据
			getImg() {
				this.imgSrc = []
				for (let i = 0;i < 20;i++)
					this.imgSrc.push(this.$store.getters.getImgURL(300,parseInt(Math.random()*300 + 100),parseInt(Math.random()*50)))
			}
		},
		mounted() {
			//添加上拉加载更多事件
			this.photosDom = document.querySelector('.photos')
			window.addEventListener('scroll', this.debounce(this.loadScroll,100))
			//初始化图片数据
			this.getImg()
			//获取columnDom
			this.columnDom = document.querySelectorAll('.column div')
			this.pushImg(this.imgSrc)
		}
	}

</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-column-gap: .1rem;
		}
		.load {
			height: 1rem;
			line-height: 1rem;
		}
	}
	@media screen and (min-width: 993px) {
		.wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-column-gap: .2rem;
		}
		.load {
			height: .5rem;
			line-height: .5rem;
		}
	}
	.photos {
		position: relative;
		width: 100%;
		margin-top: .5rem;
		padding-bottom: .5rem;
	}
	.pack {
		display: grid;
		grid-row-gap: .2rem;
	}
	.load {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: .5rem;
		text-align: center;
	}
	.load p{
		height: .25rem;
	}
	.load img {
		width: 30%;
		height: .1rem;
	}
</style>
